<!--
路由    route
路由器  router

1. 路由就是一组 key-value 的对应关系.
2. 多个路由, 需要经过路由器的管理.

SPA(single page web application) 应用, 单页面应用.

Router 路由器监视路径的变化, 路由器会进行规则的匹配. 
route 规则: /class => 班级组件

路径变化由路由器捕获, 卸载变更前的组件, 根据路由规则找到新的组件并挂载. 

1. 确定好导航区、展示区
2. 配置路由器
3. 制定路由规则(路径 => 组件 对应关系)
4. 创建对应的 【xxx.vue】 组件

两个注意点:
1. 路由组件通常存放在 pages 或 views 文件夹, 一般组件通常放在 components 文件夹.
  - 一般组件: 亲手写标签 <Demo />
  - 路由组件: 靠路由规则渲染出来的. 
    routes: [{path: '/demo', component: Demo}]
2. 通过点击导航, 视觉效果上 "消失" 了的组件, 默认是被卸载(销毁)掉的, 需要的时候再去挂载.
-->
<template>
  <div class="app">
    <Header></Header>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <!-- 此处以后可能要展示各种组件, 到底展示哪个组件, 组要看路径 -->
      <RouterView />
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
import { RouterView, RouterLink} from 'vue-router'
import Header from './components/Header.vue';
</script>

<style scoped>
/* App */
.navigate {
  display: flex;
  justify-content: space-around;
  margin: 0 100px;
}
.navigate a {
  display: block;
  text-align: center;
  width: 90px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  background-color: gray;
  text-decoration: none;
  color: white;
  font-size: 18px;
  letter-spacing: 5px;
}
.navigate a.active {
  background-color: #64967E;
  color: #ffc268;
  font-weight: 900;
  text-shadow: 0 0 1px black;
  font-family: 微软雅黑;
}
.main-content {
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 10px;
  width: 90%;
  height: 400px;
  border: 1px solid;
}
</style>